<template>
  <view style="margin-right: -30rpx">
    <scroll-view :scroll-x="true" :enhanced="true" :show-scrollbar="false" class="photo-album">
      <template v-for="v in list" :key="v.id">
        <view class="photo-album_item" @click="toDetails(v)" :style="_isLoading ? 'display:none;' : ''">
          <view class="photo-album_cover">
            <TImage
              :src="v.coverUrl"
              width="300rpx"
              height="240rpx"
              mode="aspectFill"
              border-radius="20rpx"
              @load="imgLoad"
              @error="imgError"
            />
            <view class="photo-album_num">
              <text class="ali-icon">&#xe8ba;</text>
              <text>{{ v.photoAlbumNum }} 张</text>
            </view>
          </view>
          <view class="photo-album_title text-overflow-1">
            {{ v.name }}
          </view>
        </view>
      </template>

      <template v-if="_isLoading">
        <view v-for="v in 3" :key="v" class="photo-album_item">
          <view class="photo-album_cover _skeleton" style="height: 210rpx;"></view>
          <view class="photo-album_title text-overflow-1 _skeleton"></view>
        </view>
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import type { PhotoAlbumListResult } from '@/api/photoAlbum/types';
  import { ref, type PropType, computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    list: {
      type: Array as PropType<PhotoAlbumListResult[]>,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true,
    },
  });

  function toDetails(item: PhotoAlbumListResult) {
    const { id, coverUrl, name, createTime, desc } = item;
    navigateTo({
      name: 'photoAlbumDetails',
      options: { id }
    });
  };

  const _loadNum = ref(0);
  const imgLoad = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const imgError = () => {
    _loadNum.value = _loadNum.value + 1;
  };
  const _isLoading = computed(():boolean =>{
    if(props.loading){
      // 加载中
      return true
    }else if(!props.loading && props.list.length && !_loadNum.value){
      // 加载完成，有数据，但是还在渲染
      return true
    }else{
      return false
    }
  });
</script>

<style lang="scss" scoped>
  .photo-album {
    overflow: hidden;
    white-space: nowrap;
    margin: 30rpx 0;
    &_item {
      // width: 300rpx;
      margin-right: 30rpx;
      display: inline-block;
      font-size: 28rpx;
      text-align: center;
    }
    &_cover {
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: relative;
    }
    &_num {
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10rpx 0px 0px 10rpx;
      padding: 16rpx 14rpx;
      color: #fff;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 0;
      bottom: 14rpx;
      .ali-icon {
        font-size: 32rpx;
        margin-right: 6rpx;
      }
    }
    &_title {
      width: 300rpx;
      min-height: 38rpx;
      display: inline-block !important;
      text-align: left;
    }
  }
</style>
